import { defineView } from "@/routers/tools.mjs";

/**
 * @type {DefineView}
 */
const filterFriendsView = defineView({
  controller: class {
    static $inject = ["$scope"];

    /**
     * @param {ng.IScope} $scope
     */
    constructor($scope) {
      this.$scope = $scope;
      this.searchText = "";
      this.strict = false;
      this.search = { name: "", $: "" };
      this.friends = [
        { name: "John1", phone: "555-1276" },
        { name: "Mary", phone: "800-BIG-MARY" },
        { name: "Mike", phone: "555-4321" },
        { name: "Adam", phone: "555-5678" },
        { name: "Julie", phone: "555-8765" },
        { name: "Juliette", phone: "555-5678" },
      ];
    }

    value = "";

    handleClick() {
      console.log(this.$scope);
    }
  },
  controllerAs: "$ctrl",
  template: /* HTML */ html`
    <div>
      <label
        >Search: <input type="text" class="form-control" ng-model="searchText"
      /></label>
      <table id="searchTextResults">
        <tr>
          <th>Name</th>
          <th>Phone</th>
        </tr>
        <tr ng-repeat="friend in friends | filter:searchText">
          <td>{{friend.name}}</td>
          <td>{{friend.phone}}</td>
        </tr>
      </table>
      <hr />
      <label
        >Any: <input type="text" class="form-control" ng-model="search.$"
      /></label>
      <br />
      <label
        >Name only
        <input type="text" class="form-control" ng-model="search.name" /></label
      ><br />
      <label
        >Phone only
        <input
          type="text"
          class="form-control"
          ng-model="search.phone" /></label
      ><br />
      <label
        >Equality
        <input type="checkbox" class="form-control" ng-model="strict" /></label
      ><br />
      <table id="searchObjResults">
        <tr>
          <th>Name</th>
          <th>Phone</th>
        </tr>
        2
        <tr ng-repeat="friendObj in friends | filter:search:strict">
          <td>{{friendObj.name}}</td>
          <td>{{friendObj.phone}}</td>
        </tr>
      </table>
      <textarea
        name="textareaInput"
        cols="40"
        rows="4"
        ng-model="$ctrl.value"
      ></textarea>
      ${DebugButtonHTML("$ctrl")}
    </div>
  `,
});

// # path
// ./src/view/DeveloperGuide/BusyBox/filter-friends.mjs
// -> ./src/view/DeveloperGuide/BusyBox/index.mjs
// -> ./src/view/DeveloperGuide/BusyBox/sub-routing.mjs
// -> ./src/view/DeveloperGuide/mod.mjs
// -> ./src/view/DeveloperGuide/mod-routing.mjs
// -> ./src/view/root.mjs
// -> ./src/view/root-routing.mjs
// -> ./src/bootstrap.mjs
export default filterFriendsView;

// if (import.meta.webpackHot) {
//   import.meta.webpackHot.accept(
//     "@/view/DeveloperGuide/BusyBox/filter-friends.mjs",
//     () => {},
//   );
// }
